<template>
  <div class="box">
    <div class="header">
      <div>
        <p style="color: orange; font-size: 30px">{{ seller.score }}</p>
        <p>综合评分</p>
        <p style="color: #ddd; font-size: 12px">高于周边商家{{ seller.rankRate }}%</p>
      </div>
      <div>
        <p>
          <span>服务态度</span>
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_off@2x.png" alt="" />
          <span style="color: orange">
            {{ seller.serviceScore }}
          </span>
        </p>
        <p>
          <span>服务态度</span>
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_on@2x.png" alt="" />
          <img src="@/assets/img/star24_off@2x.png" alt="" />
          <span style="color: orange">
            {{ seller.serviceScore }}
          </span>
        </p>
        <p>
          <span>送达时间</span>
          <span style="color: #ccc">44分钟</span>
        </p>
      </div>
    </div>
    <div class="section">
      <div class="rate">
        <span>全部</span>
        <span>满意</span>
        <span>不满意</span>
      </div>

      <div>
        <p style="color: #ddd; border-bottom: 1px solid #ddd">只看有内容的评价</p>
      </div>

      <div class="appRaise" v-for="(item, index) in UserappRaise" :key="index">
        <img
          :src="item.avatar"
          alt=""
          width="50px"
          height="50px"
          style="border-radius: 50%"
        />
        <div>
          <p>
            <span>{{ item.username }}</span>
            <span style="color: #ddd">{{ item.rateTime || time }}</span>
          </p>
          <p>
            <img src="@/assets/img/star24_on@2x.png" alt="" />
            <span v-show="item.deliveryTime"> {{ item.deliveryTime }}分钟送达</span>
          </p>
          <p>
            {{ item.text }}
          </p>
          <p>标签</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      seller: {},
      UserappRaise: [],
    };
  },
  mounted() {
    this.$http.get("/json/data.json").then((res) => {
      this.seller = res.data.seller;
      this.UserappRaise = res.data.ratings;
      console.log(this.UserappRaise);
    });
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background: #ddd;
  .header {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    div:nth-of-type(1) {
      width: 200px;
      height: 100px;
      background: #fff;
      text-align: center;
      padding: 0 10px;
      border-right: 1px solid #ddd;
    }
    div:nth-of-type(2) {
      width: 100%;
      margin-left: 10px;
      background: #fff;
      p {
        margin-bottom: 10px;
      }
      img {
        vertical-align: middle;
        margin-right: 5px !important;
      }
      span:nth-of-type(1) {
        font-size: 14px;
      }
    }
  }
  .section {
    width: 100%;
    background: #fff;
    margin-top: 10px;
    .rate {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      & > span {
        width: 80px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-right: 10px;
      }
      & > span:nth-of-type(1) {
        background: blue;
        color: #fff;
      }
      & > span:nth-of-type(2) {
        background: skyblue;
      }
      & > span:nth-of-type(3) {
        background: #ccc;
      }
    }

    .appRaise {
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #ddd;
      display: flex;
      padding: 10px 0;
      img {
        vertical-align: top;
      }
      & > div {
        width: 100%;
        padding: 0 10px;
        p {
          display: flex;
          justify-content: space-between !important;
        }
      }
    }
  }
}
</style>
